import React, { useState, useEffect } from 'react';
import { DeleteOutline } from 'antd-mobile-icons';
import { useSearchParams, useNavigate } from "react-router-dom";
import './BookSearch.scss'
import SearchHd from '../../components/SearchHd/SearchHd';
function BookSearch(props) {
   // search/getHotWords
   const [hot, setHot] = useState([]);
   let navigate = useNavigate();
   useEffect(() => {
      React.axios('search/getHotWords').then(res => {
         // console.log(res.list.sort((a, b) => { return b.hot - a.hot }));
         setHot(res.list)
      })
   }, [])
   let textFun=(k)=>{
      console.log(k);
      navigate('/Success?title='+k)
   }
   return hot && (
      <div className='book_search'>
         {/* search */}
         <SearchHd data={hot}/>
         <div className="recommend">
            {/* 热门搜索 */}
            <p className="rec_title">热门搜索</p>
            <ul className="rec_list">
               {hot.sort((a, b) => { return b.hot - a.hot }).map((e, i) => {
                  return <li className='item' key={i}>
                     <span className="num">{i + 1}</span>
                     <span className="txt" onClick={()=>textFun(e.name)}>{e.name}</span>
                  </li>
               })}
            </ul>
         </div>
         <div className="recommend history">
            <div className="his_top">
               <p className="his_title">历史记录</p>
               <DeleteOutline fontSize={22}/>
            </div>
         </div>
      </div>
   );
}

export default BookSearch;